<template>
  <div class="agency-manage">
    <div class="box-top">
      <el-form>
        <el-form-item label="代理账户">
          <el-input clearable placeholder="请输入代理账户" v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            class="date-picker"
            v-model="searchForm.time"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-mid">
      <el-button type="primary" @click="handleAdd(true)">新增</el-button>
      <el-button @click="handleExport">导出</el-button>
    </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column prop="username" align="center" label="代理账户" show-overflow-tooltip></el-table-column>
        <el-table-column prop="nickname" align="center" label="代理姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="create_time" align="center" label="开通时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="income" align="center" label="总存款量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expend" align="center" label="总提款量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="" align="center" label="盈利" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.expend - scope.row.income}}</template>
        </el-table-column>
        <el-table-column prop="member_num" align="center" label="旗下会员人数" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleAdd(false, scope.row)" type="text">修改</el-button>
            <el-button @click="handleRemove(scope.row.user_id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" clearable v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请设置密码" clearable v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="代理层级" prop="role_id">
          <el-select clearable v-model="ruleForm.role_id" placeholder="请选择代理层级">
            <el-option v-for="(item, i) in agencyList" :key="i" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input placeholder="请输入昵称" clearable v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="菜单权限" prop="menu_id">
          <el-select clearable v-model="ruleForm.menu_id" placeholder="请选择菜单权限">
            <el-option v-for="(item, i) in menuList.menu" :key="i" :label="item.auth_name" :value="item.auth_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input placeholder="请输入手机号码" clearable v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'AgencyManage',
  data () {
    return {
      loading: false,
      menuList: [],
      user_id: null,
      title: '新增代理',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      agencyList: [
        { label: '一级代理', value: 1 },
        { label: '二级代理', value: 2 },
        { label: '三级代理', value: 3 },
        { label: '四级代理', value: 4 }
      ],
      searchForm: {
        name: '',
        listVal: '',
        time: ['', '']
      },
      tableData: [],
      ruleForm: {
        username: '',
        password: '',
        role_id: '',
        nickname: '',
        menu_id: '',
        mobile: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请设置密码', trigger: 'blur' }
        ],
        role_id: [
          { required: true, message: '请选择代理层级', trigger: 'change' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        menu_id: [
          { required: true, message: '请设置权限', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
    this.getMenuList().then(res => {
      this.menuList = res
    })
  },
  methods: {
    ...mapActions({
      getInitData: 'agencyManage/getInitData',
      update: 'agencyManage/update',
      add: 'agencyManage/add',
      getMenuList: 'agencyManage/getMenuList'
    }),
    handleExport () {
      const { name, time: [a, b] } = this.searchForm
      const params = {
        keyword: name,
        pageSize: this.pageSize,
        page: this.currentPage,
        start_time: a && this.$moment(a).valueOf(),
        end_time: b && this.$moment(b).valueOf(),
        type: 3
      }
      window.location.href = `${window.location.origin}/app/admin/download/download-l?${this.$pars(params)}`
    },
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.updateData()
        } else {
          return false
        }
      })
    },
    updateData () {
      let str = this.title === '新增代理' ? 'add' : 'update'
      if (this.title === '新增代理') {
        str = 'add'
      } else {
        str = 'update'
        this.ruleForm.user_id = this.user_id
      }
      this[str](this.ruleForm).then(res => {
        if (res) {
          this.init()
          this.$message.success('保存成功')
          this.dialogVisible = false
        }
      })
    },
    init () {
      const { name, time: [a, b] } = this.searchForm
      const params = {
        keyword: name,
        pageSize: this.pageSize,
        page: this.currentPage,
        start_time: a && this.$moment(a).valueOf(),
        end_time: b && this.$moment(b).valueOf()
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { items, count } = res
        this.tableData = items
        this.total = count
      }).finally(() => {
        this.loading = false
      })
    },
    handleRemove (id) {
      const params = {
        status: '2',
        user_id: id
      }
      this.update(params).then(res => {
        if (res) {
          this.init()
          this.$message.success('删除成功')
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleReset () {
      this.searchForm = {
        name: '',
        time: ['', '']
      }
    },
    handleAdd (isNew, item) {
      this.dialogVisible = true
      if (isNew) {
        this.title = '新增代理'
        let data = this.$refs['ruleForm']
        if (data) {
          data.resetFields()
        }
      } else {
        this.title = '修改代理'
        const { username, password, nickname, mobile } = item
        this.user_id = item.user_id
        this.ruleForm = { username, password, role_id: item.role_id, nickname, menu_id: item.menu_id, mobile }
      }
    }
  }
}
</script>
